<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>input新增type属性值</title>
  </head>
  <body>
    <h1>input新增type属性值</h1>
    <form action="">
      邮箱：<input type="email" name="emailInfo" />
      <br />

      网址：<input type="url" name="urlInfo" />
      <br />
      数值：<input type="number" name="numberInfo" step="2" min="0" max="12" />
      <br />
      搜索：<input type="search" name="searchInfo" />
      <br />

      <!-- type="tel" 适合场景：移动端-手机号码，手机号输入框 -->
      电话：<input type="tel" name="phone" /><br />

      范围：<input
        type="range"
        name="rangeInfo"
        min="0"
        max="100"
        value="20"
        step="2"
      /><br />

      颜色：<input type="color" name="colorInfo" /><br />

      日期：<input type="date" name="dateInfo" /><br />

      月份：<input type="month" name="monthInfo" /><br />

      周：<input type="week" name="weekInfo" /><br />

      时间：<input type="time" name="timeInfo" /><br />
      日期+时间：<input type="datetime-local" name="timeLocalInfo" /><br />

      <br />
      <button>提交</button>
    </form>
  </body>
</html>
